<template>
    <div class="login-warp">
        <div class="login-main">
            <div class="title">后台管理系统</div>
            <div class="main">
                <el-form :model="form" :label-position="top" status-icon :rules="rules" ref="loginFrom" 
                    class="demo-ruleForm">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="username">
                                <el-input type="text" v-model="form.username" autocomplete="off" placeholder="请输入电话"
                                    clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item prop="password">
                                <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入密码"
                                    clearable show-password></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item>
                                <div class="login-btn">
                                    <el-button type="primary" @click="submitForm('loginFrom')">登录</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>

import { ElMessage } from "element-plus";

export default {
    data() {
        return {
            form: {
                username: '15007654547',
                password: '123123',
            },
            rules: {
                username: [
                    { required: true, message: "请输入电话", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: 'blur' }
                ]
            },
            type: ''
        };
    },
    created() {

    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let that = this;
                    this.$http.post("/admin/login", { phone: this.form.username, password: this.form.password })
                        .then(res => {
                            if (res.success) {
                                localStorage.setItem("admin", JSON.stringify(res.data))
                                localStorage.setItem("token", res.data.token)
                                ElMessage.success('登录成功')
                                that.type = res.data.type
                                // that.dealRoute() // 过滤路由 
                                that.$router.push('/admin');
                            } else {
                                ElMessage.error('密码账号错误');
                            }
                        })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 处理路由
        // dealRoute() {
        //     let routeList = this.$router.options.routes[2].children
        //     // // 获取管理后台路由信息并过滤
        //     if (this.type === "0") {
        //         routeList = routeList.filter(route => route.meta && !route.meta.adminType)
        //     }
        //     localStorage.setItem("routeList", JSON.stringify(routeList))
        // }
    },

}
</script>

<style scoped>
.login-warp {
    display: flex;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    background: url("../../assets/background.jpg");
}

.login-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 350px;

    background: #fff;
}

.title {
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    border-bottom: 1px solid #ddd;
}

.main {
    margin-top: 30px;
    display: flex;
}

.main,
.el-form {
    width: 100%;
    height: 100%;
}

.el-form,
.el-form-item__content {
    margin: 0 auto !important;
    width: 240px;
}
.login-btn {
    width: 100%;
}
.login-btn .el-button {
    width: 100%;
}
</style>
